<template>
     <el-button type="primary" @click="drawer = true"> open </el-button>

  <el-drawer v-model="drawer" title="添加管理员" :with-header="true">
      <el-form
    :model="ruleForm"
  >
    <el-form-item label="管理员账号" prop="pass">
      <el-input v-model="ruleForm.adminname" type="text" placeholder="请输入管理员账号名" autocomplete="off" />
    </el-form-item>
    <el-form-item label="管理员密码" prop="pass">
      <el-input v-model="ruleForm.password" type="password"  placeholder="请输入密码" autocomplete="off" />
    </el-form-item>
    <el-form-item label="管理员权限" prop="pass">
     <el-select v-model="ruleForm.role" placeholder="请选择管理员类型">
        <el-option label="管理员" value="1" />
        <el-option label="超级管理员" value="2" />
      </el-select>
    </el-form-item>

    </el-form>
     <el-tree
      ref="treeRef"
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps"
  />
  <!-- default-expanded-keys默认展开 -->
   <!-- default-checked-keys默认勾选 -->
     <el-button type="primary" @click="addAdminHandler">确定</el-button>
  </el-drawer>
  
    
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />

    <el-table-column property="name" label="序号">
      <template #default="scope">{{ scope.$index + 1 }}</template>
    </el-table-column>
    <el-table-column property="adminname" label="账户名">
      <template #default="scope">{{ scope.row.adminname }} </template>
    </el-table-column>
    <el-table-column label="权限">
        <template #default="scope">
                <el-tag type="success" v-if="scope.row.role==1">管理员</el-tag>
                <el-tag type="danger" v-else-if="scope.row.role==2">超级管理员</el-tag>
                {{ scope.row.role }} 
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
         Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup lang="ts">
import { ref,reactive } from "vue";
import { getAdminList } from "@/apis/admin";
import { Checked, Edit } from "@element-plus/icons-vue";
// import { table } from 'console';
interface IAdmin {
  adminname: string;
  adminid: string;
  password?: string;
  role: number;
  checkedKeys: string[];
}
getAdminList().then((res) => {
  tableData.value = res.data.data;
});

const tableData = ref<IAdmin[]>([]);

//======管理员的页面操作删除和编辑========
const handleEdit = (index: number, row: IAdmin) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: IAdmin) => {
  console.log(index, row)
}

//======抽屉形式进行管理员数据的添加=======
const drawer = ref(true)
interface IAdmin1 {
  adminname: string;
  password: string;
  role: string;
  checkedKeys: any;
}

const ruleForm = reactive<IAdmin1>({
  adminname:"",
  password:"",
  role:"",
  checkedKeys:[]
})

console.log(ruleForm);

//========添加管理员操作========
import type { TreeInstance } from 'element-plus'
interface Tree {
  id: number
  label: string
  children?: Tree[]
}
const treeRef = ref<TreeInstance>()
const addAdminHandler=()=>{
    ruleForm.checkedKeys=treeRef.value!.getCheckedKeys(false) as string[];
   
console.log(ruleForm);
}



//======树形控件====
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
</script>

<style scoped></style>
